<script setup>
import {computed} from "vue";
import store, {cosSource} from "../../store/store.js";

const player1Pick = computed(() => store.getters.getPlayer1PetsPick)
const gameRules = computed(() => store.getters.getRules)
</script>

<template>
  <div class="player1-pick">
    <div v-for="i in 6" class="player1-pick-item">
      <div class="player1-pick-type" :style="{backgroundImage: `url('${cosSource}UI/blueSuitAndTypeBox.png')`}">
        <img v-if="player1Pick.length >= i && player1Pick[i-1].pet_type_url" style="height: 100%"
             :src="player1Pick[i-1].pet_type_url" :alt="player1Pick[i-1].pet_type">
      </div>
      <div class="player1-pick-pet" :style="{backgroundImage: `url('${cosSource}UI/${i===3 && gameRules.rule_first === 'rule1' ? 'specifyHeadBox' : 'blueHeadBox'}.png')`}">
        <img v-if="player1Pick.length >= i && player1Pick[i-1].pet_id === 0" style="width: 90%"
             :src="`${cosSource}UI/emptyMask.png`" :alt="player1Pick[i-1].pet_id">
        <img v-else-if="player1Pick.length >= i && player1Pick[i-1].pet_head_url" style="width: 90%"
             :src="player1Pick[i-1].pet_head_url" :alt="player1Pick[i-1].pet_id">
        <img v-else-if="player1Pick.length >= i && player1Pick[i-1].hidden" style="width: 90%"
             :src="`${cosSource}UI/hideHeadMask.png`">
        <el-text v-if="player1Pick[i-1] && 'pet_name' in player1Pick[i-1]" size="small" truncated
                 style="position: absolute; bottom: 5%; left: 10%; max-width: 80%">
          {{player1Pick[i-1].pet_name}}
        </el-text>
        <div v-if="player1Pick.length >= i" style="position: absolute; bottom: 20%; right: 3%; height: 30%">
          <img v-if="player1Pick[i-1].pet_id % player1Pick[i-1].pet_origin_id === 1"
               :src="`${cosSource}UI/featureUp.png`" style="height: 80%"/>
          <img v-if="player1Pick[i-1].pet_id % player1Pick[i-1].pet_origin_id === 2"
               :src="`${cosSource}UI/skillUp.png`" style="height: 80%"/>
          <img v-if="player1Pick[i-1].pet_origin_id === 4643"
               :src="`${cosSource}statusCondition/${player1Pick[i-1].pet_id % player1Pick[i-1].pet_origin_id}.png`" style="height: 80%"/>
          <img v-if="'ex_mark' in player1Pick[i-1] && player1Pick[i-1].ex_mark === 1"
               :src="`${cosSource}UI/old.png`" style="height: 80%"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.player1-pick {
  width: 11%;
}
.player1-pick-item {
  height: 15%;
  padding: 3px;
  display: flex;
}
.player1-pick-type {
  height: 60%;
  margin-right: 5px;
  aspect-ratio: 1/1;
  background-repeat: round;
}
.player1-pick-pet {
  height: 100%;
  background-color: #535bf2;
  padding-top: 2px;
  aspect-ratio: 1/1.225;
  background-repeat: round;
  position: relative;
}

.el-text {
  color: white;
}
</style>